#{extends 'main.html' /}
#{set title:webTitle /}

<script>
  
$(function() {
    $( "#datepicker" ).datepicker({
        showOn: "button",
        buttonImage: "@{'/public/images/icon_set_1_32x32/actions/1day.png'}",
        //buttonImage: "!{'/public/stylesheets/ui-lightness/images/calendar.gif'}",
        buttonImageOnly: true
    });
});
  
function toggleImage( icon, data ) {
    $( icon ).toggleClass( "openIcon closeIcon" );
    if ( $( icon ).hasClass('openIcon') ) {
      $( data ).show();
    } else {
      $( data ).hide();
    }
  }
</script>

<div id="trnsactionHeader" class="trnsaction">
  <div id="trnsactionHeaderDisplay"  class="trnsactionDisplay">
    <div id="trnsactionHeaderImage" class="trnsactionImage openIcon" onclick="toggleImage('#trnsactionHeaderImage','#trnsactionHeaderData');" width="100%">สถานที่</div>
  </div>
  <div id="trnsactionHeaderData">
    <ul id="trnsactionTab" class="trnsactionTab tabs showme" data-tabs="tabs" >
      <li class="active"><a href="#MDTab1">หน้าแรก</a></li>
      <li><a href="#MDTab2">Tab2</a></li>
      <li><a href="#MDTab3">TabN</a></li>
    </ul>

    <div class="pill-content" style="width: 90%">
      <div class="tab-pane active" id="MDTab1">
          <table>
              <tr><td >ชื่อบริษัท</td><td>ที่อยู่</td><td >อำเภอ</td></tr>
              #{list items:companies, as:'company'}
              <tr><td>${company.Name}</td><td>${company.Address}</td><td>${company.District}</td></tr>
              #{/list}
          </table>
      </div>
      <div id="MDTab2" class="tab-pane" >Tab2 . . . </div>
      <div id="MDTab3" class="tab-pane" >Tab3  .  .  .  </div>
    </div>
  </div>
</div>
